<template>
  <div class="card">
    <div class="nav">
      <div
        class="item"
        v-for="(item, index) in memberCouponCount"
        :key="index"
        v-if="index !== 3"
        :class="{ active: memberCouponStatus === item.status }"
        @click="handleIsUse(item.status)"
      >
        <text>{{ item.statusDesc }}({{ item.count }})</text>
      </div>
    </div>
    <div class="types">
      <div class="btn" :class="{ active: couponType === null }" @click="handleIsType(null)">全部</div>
      <div class="btn" :class="{ active: couponType === 1 }" @click="handleIsType(1)">代金券</div>
      <div class="btn" :class="{ active: couponType === 2 }" @click="handleIsType(2)">折扣卡</div>
    </div>
    <div class="content">
      <template v-if="list && list.length > 0">
        <div class="discount-list">
          <div class="discount-list-item" v-for="(item, index) in list" :key="index" :class="{ expired: item.memberCouponStatus === 2 || item.memberCouponStatus === 1 }">
            <image v-if="item.memberCouponStatus === 1" class="discount-list-item__expired" src="@/static/images/mine/discount-card/icon-expired@2x.png" mode="aspectFit"></image>
            <image v-if="item.memberCouponStatus === 2" class="discount-list-item__expired" src="@/static/images/mine/discount-card/icon-isuser@2x.png" mode="aspectFit"></image>
            <div class="dot-top"></div>
            <div class="dot-bottom"></div>
            <div class="left" :class="{ cash: item.couponType === 1 }">
              <div class="left-corner">{{ item.couponType === 1 ? '代金券' : item.couponType === 2 ? '折扣券' : '折扣卡' }}</div>
              <div class="left-info">
                <div class="num">
                  <div class="text">{{ item.couponType === 1 ? item.faceValue : (item.discount * 10).toFixed(1) }}</div>
                  <div class="unit">{{ item.couponType == 1 ? '元' : '折' }}</div>
                </div>
                <div class="desc">{{ item.reachAmountDesc }}</div>
              </div>
            </div>
            <div class="right">
              <div class="right-info">
                <div class="discount-name">{{ item.title }}</div>
                <div class="time" v-if="item.useStartTime">
                  <image class="icon" src="@/static/images/index/icon-time@2x.png" mode=""></image>
                  <div class="text">{{ item.useStartTime }}-{{ item.useEndTime }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <image class="no-data-bg" src="@/static/images/mine/discount-card/no-data-bg@2x.png" mode="aspectFit"></image>
        <div class="tips">暂无折扣卡</div>
      </template>
    </div>
  </div>
</template>

<script>
import { memberCouponSearchList } from '@/api/member.js';
export default {
  data() {
    return {
      memberCouponStatus: 0,
      couponType: null,
      memberCouponCount: [],
      list: [],
      isloading: false,
      total: 0,
      pages: {
        start: 1,
        limits: 10
      }
    };
  },
  onShow() {
    this.list = [];
    this.isloading = false;
    this.pages = {
      start: 1,
      limits: 10
    };
    this.getMemberCouponSearchList();
  },
  onReachBottom() {
    if (this.pages.start * this.pages.limits >= this.total) return this.$modal.msg('数据加载完毕!');

    if (this.isloading) return;

    // 让页码值自增+1
    this.pages.start++;
    this.getMemberCouponSearchList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.list = [];
    this.isloading = true;
    this.total = 0;
    this.pages = {
      start: 1,
      limits: 10
    };
    this.getMemberCouponSearchList();

    this.$nextTick(() => {
      setTimeout(() => {
        uni.stopPullDownRefresh();
        this.isloading = false;
      }, 500);
    });
  },
  methods: {
    getMemberCouponSearchList() {
      const data = {
        memberCouponStatus: this.memberCouponStatus,
        couponType: this.couponType,
        ...this.pages
      };
      this.isloading = true;
      memberCouponSearchList(data).then(res => {
        this.memberCouponCount = res.appendData.memberCouponCount || [];

        this.list = res.rows ? this.list.concat(res.rows) : [];
        this.total = res.total;
        this.isloading = false;
      });
    },
    handleIsUse(opt) {
      this.list = [];
      this.isloading = false;
      this.total = 0;
      this.pages = {
        start: 1,
        limits: 10
      };
      this.memberCouponStatus = opt;
      this.getMemberCouponSearchList();
    },
    handleIsType(opt) {
      this.list = [];
      this.isloading = false;
      this.total = 0;
      this.pages = {
        start: 1,
        limits: 10
      };
      this.couponType = opt;
      this.getMemberCouponSearchList();
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  min-height: 100vh;
  background: #f8f8f8;

  .nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    background-color: #fff;

    .item {
      width: 100%;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #111111;
      text-align: center;

      text {
        display: inline-block;
        padding: 26rpx 0;
        border-bottom: 4rpx solid #fff;
      }

      &.active {
        font-weight: 600;
        color: #1e60ff;

        text {
          border-bottom: 4rpx solid #1e60ff;
        }
      }
    }
  }

  .types {
    padding: 24rpx 56rpx;
    display: flex;
    align-items: center;
    background: #ffffff;

    .btn {
      margin-right: 24rpx;
      padding: 6rpx 32rpx;
      background: #f3f3f3;
      border-radius: 28rpx;
      font-size: 31rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      text-align: center;
      border: 2rpx solid #f3f3f3;

      &.active {
        font-weight: 600;
        color: #ffffff;
        background: #1e60ff;
        border-radius: 28rpx;
        border: 2rpx solid #1e60ff;
      }
    }
  }

  .content {
    padding: 24rpx;
    box-sizing: border-box;

    .no-data-bg {
      display: block;
      margin: 174rpx auto 0;
      width: 444rpx;
      height: 316rpx;
      font-size: 36rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    .tips {
      margin-top: 40rpx;
      font-size: 36rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      text-align: center;
    }

    .discount-list {
      height: 89%;
      overflow-y: auto;
      background-color: #f2f2f2;

      .discount-list-item {
        position: relative;
        display: flex;
        width: 702rpx;
        height: 176rpx;
        margin: 0 auto;
        margin-top: 24rpx;
        background: #fff;
        box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(238, 238, 238, 0.5);
        border-radius: 20rpx;
        border: 3rpx solid #f2f2f2;

        &__expired {
          position: absolute;
          top: 0;
          right: 0;
          width: 76rpx;
          height: 74rpx;
        }

        &.active {
          border: 3rpx solid #1e60ff;

          .dot-top {
            border: 3rpx solid #1e60ff;
            border-top: 0;
          }

          .dot-bottom {
            border: 3rpx solid #1e60ff;
            border-bottom: 0;
          }
        }

        .dot-top {
          position: absolute;
          top: -1rpx;
          left: 266rpx;
          width: 28rpx;
          height: 14rpx;
          border-radius: 0 0px 14rpx 14rpx;
          line-height: 14rpx;
          background-color: #f2f2f2;
          z-index: 1;
        }

        .dot-bottom {
          position: absolute;
          bottom: -1rpx;
          left: 266rpx;
          width: 28rpx;
          height: 14rpx;
          border-radius: 14rpx 14rpx 0 0px;
          line-height: 14rpx;
          background-color: #f2f2f2;
          z-index: 1;
        }

        .left {
          position: relative;
          min-width: 280rpx;
          height: 100%;
          background: linear-gradient(138deg, #ffe15b 0%, #ff9344 100%);
          border-radius: 17rpx 0rpx 0rpx 17rpx;
          overflow: hidden;

          &.cash {
            background: linear-gradient(138deg, #ff5bc4 0%, #ff4b44 100%);

            .left-corner {
              background: #ff4b44;
            }

            .desc {
              color: #ff4b44;
            }
          }

          &-corner {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 168rpx;
            height: 35rpx;
            background: #ff9344;
            color: #fff;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            line-height: 1;
            transform: rotate(-45deg);
            position: absolute;
            top: 7px;
            left: -52rpx;
          }
        }

        .left-info {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          height: 100%;

          .num {
            display: flex;
            justify-content: center;
            align-items: baseline;
            margin-bottom: 10rpx;

            .text {
              font-size: 80rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #ffffff;
              line-height: 1;
            }

            .unit {
              font-size: 24rpx;
              font-family: PingFang-SC-Bold, PingFang-SC;
              font-weight: bold;
              color: #ffffff;
              line-height: 1;
            }
          }

          .desc {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4rpx 12rpx;
            background: #ffffff;
            border-radius: 20rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff9344;
            line-height: 1;
          }
        }

        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20rpx 0 15rpx;
          width: 442rpx;
          height: 100%;

          &-info {
            .discount-name {
              margin-bottom: 16rpx;
              font-size: 32rpx;
              font-family: PingFang-SC-Bold, PingFang-SC;
              font-weight: bold;
              color: #111111;
              line-height: 1.2;
            }

            .time {
              display: flex;
              align-items: center;

              .icon {
                width: 24rpx;
                height: 24rpx;
              }

              .text {
                margin-left: 8rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 24rpx;
              }
            }
          }
        }

        &.expired {
          .left {
            background: linear-gradient(138deg, #ebebeb 0%, #999999 100%);

            .left-corner {
              background: #b6b6b6;
            }

            .desc {
              color: #b6b6b6;
            }
          }

          .right {
            .right-info {
              .discount-name {
                color: #999999;
              }
            }
          }
        }
      }
    }
  }
}
</style>
